<template>
    <div id="chart">
        <div>
            <div class="title">
                主要出行研学基地
            </div>
            <!--                    柱状图-->
            <div class="histogram" ref="histogram" style="width: 600px;height:400px;">

            </div>
        </div>
        <div>
            <!--                    饼状图-->
            <div class="pie" ref="pie" style="width: 600px;height:400px;">

            </div>
        </div>
    </div>
</template>

<script>
    import echarts from "echarts";
    export default {
        name: "Chart",
        mounted() {
            const histogram = this.$refs.histogram;
            const myHistogram = echarts.init(histogram);
            myHistogram.setOption(this.option);
            const pie = this.$refs.pie;
            const myPie = echarts.init(pie);
            myPie.setOption(this.option2);
        },
        data(){
            return{
                myChart: null,
                option: {
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['云台山', '清明上河图', '河南省博物馆', '少林寺', '白居易暮', '杜甫故里', '河南地质博物馆'],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '直接访问',
                            type: 'bar',
                            barWidth: '60%',
                            data: [200, 400, 600, 800, 1000, 1200, 1400]
                        }
                    ]
                },
                option2: {
                    title: {
                        text: '研学线路特色占比',
                        subtext: '纯属虚构',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: 335, name: '传统文化'},
                                {value: 310, name: '革命传统'},
                                {value: 234, name: '国情教育'},
                                {value: 135, name: '国防科工'},
                                {value: 1548, name: '自然生态'}
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }
            }
        }
    }
</script>

<style scoped>
    #chart .title {
        text-indent: 20px;
        color: rgba(51, 51, 51, 1);
        background-color: rgba(255, 255, 255, 1);
        font-size: 18px;
        line-height: 150%;
        text-align: left;
        font-weight: bold;
        margin-bottom: -30px;
    }

    #chart {
        display: flex;
        justify-content: space-around;
    }
</style>
